<template>
	<view class="bindingPhoneNumber">
		<u-popup :show="bindingPhoneNumberShow"
			@close="noOpen ? '' : close()"
			mode="center"
			:closeable="noOpen ? false : true"
			round='30'>
			<view>
				<view class="bindingPhoneNumber_title">
					完善手机号
				</view>
				<view class="main_phoneNumber_form">
					<u--form labelPosition="left"
						:model="userInfo"
						:rules="rules"
						labelWidth="160"
						ref="uForm">
						<u-form-item label="手机号码"
							prop="phoneNumber"
							borderBottom
							ref="item1">
							<u--input v-model="userInfo.phoneNumber"
								border="none"
								type='number'
								placeholder="请输入手机号码"
								maxlength="11"></u--input>
						</u-form-item>

						<u-form-item label="验证码"
							prop="authCode"
							borderBottom
							ref="item1">
							<!-- #ifndef APP-NVUE -->
							<u-input border="none"
								v-model="userInfo.authCode"
								placeholder="请填写验证码">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input border="none"
									v-model="userInfo.authCode"
									placeholder="请填写验证码">
									<!-- #endif -->
									<template slot="suffix">
										<u-code ref="uCode"
											@change="codeChange"
											seconds="20"
											changeText="X秒重新获取"></u-code>
										<view class="tips">
											<view class="line"></view>
											<u-button @tap="getCode"
												:text="tips"
												size="mini"></u-button>
										</view>
									</template>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
							<!-- <u--input v-model="userInfo.authCode"
								border="none"
								placeholder="请填写验证码">
					
								<template slot="suffix">
									<u-code ref="uCode"
										@change="codeChange"
										seconds="20"
										changeText="X秒重新获取哈哈哈"></u-code>
									<u-button @tap="getCode"
										:text="tips"
										type="success"
										size="mini">获取验证码</u-button>
										
								</template>
							</u--input> -->
						</u-form-item>
					</u--form>
				</view>
				<view @click="save"
					class="">
					<newBtn color="#FFF"
						bgColor="#ec4141"
						name="完成"></newBtn>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {
		sendVerificationCode,
		login,
		getCurrentMallMember
	} from '@/api/global.js'
	import {
		updateMallMemberInfo
	} from '@/api/setting.js'
	export default {
		name: "bindingPhoneNumber",
		components: {
			newBtn
		},
		props: {
			noOpen: {
				type: Boolean,
				default: false
			},
			bindingPhoneNumberShow: {
				type: Boolean,
				default: false
			}
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				userInfo: {
					phoneNumber: '', //手机号
					authCode: '', //验证码
				},
				tips: 0,
				rules: {
					'phoneNumber': [{
							type: 'string',
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}, {
							len: 11,
							message: '手机号码长度为11位',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'authCode': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			//关闭
			close() {
				this.$emit('close')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$refs.uForm.validateField('phoneNumber', (res) => {
					if (res.length == 0) {
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							sendVerificationCode({
								phone: this.userInfo.phoneNumber,
								tag: 2
							}).then(resr => {
								if (resr.code == 2000) {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								} else {
									uni.hideLoading();
									this.Utils.toast(`${resr.msg}`)
								}

							})

						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}
				})

			},
			//完成
			async save() {
				//校验必填
				let config = await this.$refs.uForm.validate()
				if (config) {
					let resr = await updateMallMemberInfo({
						name: '',
						phone: this.userInfo.phoneNumber,
						password: '',
						headUrl: "",
						verificationCode: this.userInfo.authCode,

					})
					console.log(resr);
					if (resr.code == 2000) {
						if (this.noOpen) {
							let res = await login({
								branchId: this.$store.state.branchId, //分支机构id[关联分支机构表]
								bussinessId: this.$store.state.bussinessId, //商户id[关联商户表]
								accountId: this.$store.state.accountId, //账套id[关联账套表]
								source: 1,
								// #ifdef MP-WEIXIN 
								source: 1, //来源[1：微信小程序 2：APP]
								// #endif
								// #ifdef APP-PLUS
								source: 2, //来源[1：微信小程序 2：APP]
								// #endif
								phone: this.userInfo.phoneNumber, //手机号
								verificationCode: this.userInfo.authCode,
							})
							console.log(res);
							if (res.code == 2000) {
								// 存储账户信息

								let userInfo = res.data.info
								uni.setStorageSync('visitorLoginInfo', JSON.stringify(userInfo))
								uni.setStorageSync('visitorAccessToken', JSON.stringify(res.data.info.accessToken))
								this.$store.commit('updateToken', res.data.info.accessToken)
								this.Utils.toast(`绑定登录成功`)
								this.$emit('save');

							} else {
								this.Utils.toast(`${res.msg}`)
							}
						} else {
							let result = await getCurrentMallMember();
							console.log(result, '账户信息');
							// 存储账户信息
							let userInfo = JSON.parse(uni.getStorageSync('visitorLoginInfo'));
							userInfo.MallMember = result.data.info;
							uni.setStorageSync('visitorLoginInfo', JSON.stringify(userInfo))
							this.Utils.toast(`绑定登录成功`)
							setTimeout(() => {
								this.$emit('save')
							},500)
							
						}
					} else {
						this.Utils.toast(`${resr.msg}`)
					}
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-button--mini {
		min-width:100rpx !important
	}
	/deep/.bindingPhoneNumber_title {
		margin-top: 28rpx !important;
	}

	.badges /deep/.u-badge {
		position: absolute;
		right: 0;
		top: -10rpx;
	}

	/deep/.u-popup__content__close.u-popup__content__close--top-right {
		top: 42rpx
	}

	/deep/.main_phoneNumber_form {
		margin-left: 26rpx !important;
		margin-right: 18rpx !important;
	}

	/deep/.out {
		padding: 28rpx !important;

	}

	/deep/.out_nei {
		background: linear-gradient(89.4968298603963deg, rgba(236, 65, 65, 1) 0%, rgba(255, 146, 146, 1) 99%) !important;
	}

	/deep/ .u-popup__content__close {
		top: 22rpx;
		height: 36rpx;
		width: 36rpx;
		line-height: 80rpx;
		border: rgb(144, 147, 153) 1px solid;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tips {
		position: relative;

		.line {
			position: absolute;
			left: 0;
			top: 12rpx;
			width: 2rpx;
			height: 20rpx;
			background-color: #ccc;
		}

		/deep/.u-button {
			color: #EC4141 !important;
			border: none !important;
			background-color: transparent !important;

			text {
				font-size: 30rpx !important;
			}
		}
	}

	.bindingPhoneNumber /deep/.u-popup__content {
		// height: 640rpx !important;
		width: 90% !important;
		padding-bottom: 70rpx !important;
	}

	.bindingPhoneNumber_title {
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		padding-left: 50rpx;
		font-size: $font_size_18;
		color: $text_color_333;
		font-weight: bold;
	}

	.main_phoneNumber_form {
		padding: 20rpx;
	}

	// /deep/.u-button--success{
	// 	color: $text_color_ec4141;
	// 	background-color: transparent;
	// 	border-color: transparent;
	// 	border-width: 0;
	// 	border-style: none;
	// }
	/deep/.u-form-item__body {
		flex-direction: column !important;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 32rpx;
		color: $text_color_333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0 !important;
	}
</style>